<template lang="jade">

div.return-bar(@click="back()")
	i.iconfont &#xe668;
	申请贷款
div.apply-loan.detail_top
	header
		span 
		申请人资料
	validator(name="validation1")
		form(v-on:submit.prevent="apply")
			ul.detail
				li
					span.txt 借款人姓名:
					input(type="text", placeholder="请输入真实姓名")
				li
					span.txt 身份证图片:
					span.content

						span.img.card1
							input(type="file",  @change="onFileChange1")
							img(v-bind:src="idcard1")
						span.img.card2.pl
							input(type="file",  @change="onFileChange2")
							img(v-bind:src="idcard2")
				li
					span.txt 贷款类型:

					input(type="radio", v-model="borrow_name_no_type", value="1",   id="checkbox3", class="chk_1", checked)
					label(for="checkbox3")  押车

					input(type="radio", v-model="borrow_name_no_type", value="2",   id="checkbox4", class="chk_1")
					label(for="checkbox4")  押房

				li
					span.txt 借款抵押物:
					input(type="text", v-model="name",    placeholder="请输入借款抵押物")

				li
					span.txt 借款用途:
					//input(type="text", placeholder="请输入借款用途")
					span.content
						group
							selector( value="3", v-model="borrow_use", :options="borrow_use_list")

				li
					span.txt 借款金额:
					input(v-validate:account="{required:true}", v-model="account", type="text", placeholder="请输入借款金额")元
				li
					span.txt 还款方式:
					span.content
						group
							selector( value="month",  v-model="borrow_style",   :options="borrow_style_list")

				li
					span.txt 借款期限:
					span.content
						group
							selector( value="1", v-model="borrow_period", :options="borrow_period_list")

				li
					span.txt 驾驶证/房产证:
					input(type="text", placeholder="请输入驾驶证/房产证")
				li
					span.txt 抵押物类型:

					input(type="radio", v-model="durationFlg", value="2",  id="checkbox5", class="chk_1")
					label(for="checkbox5")  质押

					input(type="radio", v-model="durationFlg", value="1",   id="checkbox6", class="chk_1", checked)
					label(for="checkbox6")  抵押


				li
					span.txt 图形验证码:
					input.big(v-validate:verify="{required:true, maxLength: 4}", type="text", v-model="verify", placeholder="请输入图形验证码")
					img.verify(v-show="show_img", src="{{img_src}}", @click="reloadImg")
				//li
					span.txt 手机号码:
					input.big(v-model="phone", type="text", placeholder="请输入手机号")


			div.btn
				button.summit(type="submit") 提交申请

	div.note 注：如不提交申请, 返回时系统将自动为您保存

	toast(:show.sync="show_toast") 请认真填完以上资料,谢谢合作!
</template>

<style>
@import '~vux/dist/vux.css';
</style>

<script>
import '../../assets/sass/user/loan.scss'
import {Api_Reg_Code, c_user_appy_loan, c_img_verify} from '../../config/api'
import { Selector, Group , Toast} from 'vux'
export default {
	data () {
		return {
			busy:false,
			show_toast:false,
			images:[],
			idcard:[],
			idcard1:'',
			idcard2:'',

			idcard1_obj:[],
			idcard2_obj:[],

			phone:'',
			img_src:'',

			name:'',
			borrow_name_no_type:'',
			borrow_use:'3',
			account:'',
			borrow_style:'month',
			borrow_period:"1",
			verify:'',
			durationFlg:'',

			show_img:true,
			mort_type:'',
			borrow_use_list:[{key: '3', value: '买房'}, {key: '4', value: '装修'}, {key: '5', value: '赎楼'}, {key: '6', value: '资金周转'}, {key: '9', value: '其他'}],
			borrow_style_list: [{key: 'month', value: '等额本息'}, {key: 'endmonth', value: '按月付息到期还本息'}],
			borrow_period_list: [{key: '1', value: '1个月'}, {key: '3', value: '3个月'}, {key: '6', value: '6个月'}, {key: '1', value: '12个月'}, {key: '24', value: '24个月'}, {key: '36', value: '36个月'}]
		}
	},
	components: {
		Group,
		Selector,
		Toast
	},
	methods: {
		back(){
			window.history.back();
		},

		onFileChange1(e) {
			var files = e.target.files || e.dataTransfer.files;
			if (!files.length) return; 
			//console.log(files)
			//this.createImage(files);
			var that = this;
			//this.idcard.push(files);
			this.idcard1_obj = files[0];
			var reader = new FileReader();
			reader.readAsDataURL(files[0]); 
			reader.onload =function(e){
				that.idcard1 = e.target.result;
				//that.images.push(e.target.result);
			};  

		},

		onFileChange2(e) {
			var files = e.target.files || e.dataTransfer.files;
			if (!files.length) return; 
			//console.log(files)
			//this.createImage(files);
			var that = this;
			//this.idcard.push(files);
			this.idcard2_obj = files[0];
			var reader = new FileReader();
			reader.readAsDataURL(files[0]); 
			reader.onload =function(e){
				that.idcard2 = e.target.result;
				//that.images.push(e.target.result);
			};

		},


		createImage(file) {
				var that = this;
				if(typeof FileReader==='undefined'){
						alert('您的浏览器不支持图片上传，请升级您的浏览器');
						return false;
				}
				var image = new Image();         
				var vm = this;
				var leng=file.length;
				for(var i=0;i<leng;i++){
						var reader = new FileReader();
						reader.readAsDataURL(file[i]); 
						reader.onload =function(e){                                
							that.idcard1 = e.target.result
						};                 
				}                        
		},


		apply: function () {
			var that = this;
			if (this.$validation1.invalid || this.busy) {
				that.show_toast = true;
				return false;
			}
			this.busy = true;
			this.idcard = [];
			this.idcard.push(this.idcard1_obj);
			this.idcard.push(this.idcard2_obj);

			var data = new FormData();

			for(var i in this.idcard){
				data.append("idcard[]",this.idcard[i]);
			}
			//console.log(this.idcard)

			data.append('message', this.message);
			data.append('name', this.name);
			data.append('borrow_name_no_type', this.borrow_name_no_type);
			data.append('borrow_use', this.borrow_use);
			data.append('account', this.account);
			data.append('borrow_style', this.borrow_style);
			data.append('borrow_period', this.borrow_period);
			data.append('verify', this.verify);
			data.append('durationFlg', this.durationFlg);

			//var data = {'idcard':this.idcard,'borrow_name_no_type':this.borrow_name_no_type,'name':this.name,'borrow_use':this.borrow_use,'account':this.account,'borrow_style':this.borrow_style,'borrow_period':this.borrow_period, 'durationFlg':this.durationFlg, 'verify':this.verify}

			this.$http.post(c_user_appy_loan, data,'').then(function (response) {
					var rs = response.data;
					alert(rs.msg)
					if(rs.code =='30021'){
						this.reloadImg();
					}
					this.busy = false;
			});
		},

		reloadImg(){
			/*this.$http({url: c_img_verify, method: 'GET'}).then(function (response) {
				this.img_src = c_img_verify;
			});*/
			this.show_img = false;
			this.img_src = '';
			var that = this;
			//this.img_src = c_img_verify
			setInterval(function(){
				that.show_img = true;
				that.img_src = c_img_verify
			},200); 
			
		},
		sendCode: function () {
			if(!this.phone){
				alert('请输入您的手机号！')
				return false;
			}
			this.mobile_txt = "已发送"
			var data = {'phone': this.phone}
			this.$http.post(Api_Reg_Code, data,'').then(function (response) {
					var rs = response.data;
					alert(rs.msg)
			});
		}
	},
	route: {
		activate ( transition ) {
			if(sessionStorage.getItem("login")==null){
				this.$route.router.go('/login?from='+this.$route.path.substring(1))
				return false;
			}
			this.img_src = c_img_verify
			transition.next();
		}
	}
}
</script>